<!doctype html>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

    <title>高德地图展示</title>

    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>

    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <!-- 这里要配置参数key,将其值设置为高德官网开发者获取的key -->
    <script src="http://webapi.amap.com/maps?v=1.3&key=d0533d004d93f60c12ceff402c577627"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

   <style type="text/css">
     /*   #container{
            margin-left:500px;
            margin-top:50px;
            width:800px;
            height:500px;
        }*/
     #up-map-div{
         width:300px;
         height:100px;
         top:30px;
         right:30px;
         position:absolute;
         z-index:9999;
         border:1px solid blue;
         　opacity:0.2;
     }
    </style>
</head>
<body>
<div></div>
<div id="container"></div>
<div id="up-map-div"></div>
<script>
 var map = new AMap.Map('container', {
     resizeEnable: true,
     zoom: 5,
     center: [114.047614, 22.600735],
     mapStyle: 'amap://styles/ac617ee5ac942dc438bc8ae1b99b7939',
     viewMode: '3D', //开启3D视图,默认为关闭
     buildingAnimation: true //楼块出现是否带动画
     //前往创建自定义地图样式：https://lbs.amap.com/dev/mapstyle/index
 });
 var capitals = [{
     adcode: "",
     center: [114.063185, 22.60495],
     citycode: "1853",
     name: "星河word",
     text: '这是星河word小区',
     content: "<div class = 'area'>星河word</div>"
 }, {
     adcode: "",
     center: [114.384129, 30.508543],
     citycode: "3803",
     name: "保利华",
     text: '这是保利华都小区',
     content: "<div class = 'area'><img src='${pageContext.request.contextPath}/img/american-express.png'/><br><a>双头搅拌桩记录仪10号</a></div>"

 }];
 //实例化信息窗体
 var title = '提示';

 var infoWindowArr = [],
     facilities = [];
 for (var i = 0; i < capitals.length; i++) {
     var marker = new AMap.Marker({
         position: new AMap.LngLat(capitals[i].center[0], capitals[i].center[1]),
         offset: new AMap.Pixel(-10, -10),
         icon: 'http://vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
         title: capitals[i].name,
     });
     facilities.push(marker);
     var infoWindow = new AMap.InfoWindow({
         isCustom: true, //使用自定义窗体
         content: createInfoWindow(title, capitals[i].content),
         offset: new AMap.Pixel(0, -20)
     });
     infoWindowArr.push(infoWindow);
 }
 map.add(facilities);

 for (var i = 0; i < facilities.length; i++) {
     (function(i) {
         facilities[i].on('click', function(event) {
             infoWindowArr[i].open(map, event.target.getPosition());
         });
     })(i)
 }


 //构建自定义信息窗体
 function createInfoWindow(title, content) {
     var info = document.createElement("div");
     info.className = "custom-info input-card content-window-card";

     //可以通过下面的方式修改自定义窗体的宽高
     info.style.width = "300px";
     // 定义顶部标题
     var top = document.createElement("div");
     var titleD = document.createElement("div");
     var closeX = document.createElement("span");
     top.className = "info-top";
     titleD.innerHTML = title;
     closeX.innerHTML = "&times;";
     closeX.className = "closeX";
     closeX.onclick = closeInfoWindow;

     top.appendChild(titleD);
     top.appendChild(closeX);
     info.appendChild(top);

     // 定义中部内容
     var middle = document.createElement("div");
     middle.className = "info-middle";
     middle.style.backgroundColor = 'white';
     middle.innerHTML = content;
     info.appendChild(middle);

     // 定义底部内容
     var bottom = document.createElement("div");
     bottom.className = "info-bottom";
     var sharp = document.createElement("span");
     sharp.className = "sharp";
     bottom.appendChild(sharp);
     info.appendChild(bottom);
     return info;
 }
 //关闭信息窗体
 function closeInfoWindow() {
     map.clearInfoWindow();
 }
</script>
</body>
</html>